<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>淘宝网-淘！我喜欢</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="web-shop">
        <!-- 头部导航条 -->
        <div class="header">
            <div class="container">
                <ul class="nav">
                    <li>
                        <a href="javascript:;" class="arrow">中国大陆</a>
                    </li>
                    <li class="orange">
                        <a href="javascript:;">亲，请登录</a>
                    </li>
                    <li>
                        <a href="javascript:;">免费注册</a>
                    </li>
                    <li>
                        <a href="javascript:;">手机逛淘宝</a>
                    </li>
                </ul>
                <ul class="nav">
                    <li>
                        <a href="javascript:;" class="arrow">我的淘宝</a>
                    </li>
                    <li>
                        <a href="javascript:;" class="arrow">购物车</a>
                    </li>
                    <li>
                        <span class="start" class="arrow"></span>
                        <a href="javascript:;">收藏夹</a>
                    </li>
                    <li>
                        <a href="javascript:;" class="arrow">商品分类</a>
                    </li>
                    <li>
                        <a href="javascript:;" class="arrow">卖家中心</a>
                    </li>
                    <li>
                        <a href="javascript:;" class="arrow">联系客服</a>
                    </li>
                    <li>
                        <a href="javascript:;" class="arrow">网站导航</a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="body-1">
            <!-- 搜索框 -->
            <div class="search">
                <div class="search-logo">
                    <a href="https://www.taobao.com/"></a>
                </div>
                <div class="search-box">
                    <ul class="search-tab">
                        <a href="javascript:;" class="choose1">淘宝</a>
                        <a href="javascript:;">天猫</a>
                        <a href="javascript:;">店铺</a>
                    </ul>
                    <form class="search-input">
                        <input class="box1" type="text" name="search">
                        <button class="btn" type="submit">搜索</button>
                    </form>

                    <div class="search-choose">
                        <a href="javascript:;">新款连衣裙</a>
                        <a href="javascript:;">四件套</a>
                        <a href="javascript:;" class="tx">潮流T恤</a>
                        <a href="javascript:;">时尚女鞋</a>
                        <a href="javascript:;">短裤</a>
                        <a href="javascript:;">半身裙</a>
                        <a href="javascript:;">男士外套</a>
                        <a href="javascript:;">墙纸</a>
                        <a href="javascript:;">新款男鞋</a>
                        <a href="javascript:;">耳机</a>
                    </div>
                </div>
                <div class="search-code">
                    <a href="javascript:;">
                        <img src="./img/jnh.png" alt="">
                    </a>
                </div>
            </div>
            <!-- 导航栏 -->
            <ul class="nav">
                <li class="left-nav">主题市场</li>
                <li class="li">天猫</li>
                <li class="li">聚划算</li>
                <li class="li">|</li>
                <li class="li">天猫商城</li>
                <li class="li">司法拍卖</li>
                <li class="li">淘宝心选</li>
                <li class="li">|</li>
                <li class="li">飞猪旅行</li>
                <li class="li">智能生活</li>
                <li class="li">苏宁易购</li>
            </ul>
            <!-- 内容区域 -->
            <div class="shop" id="">
                <!-- 左侧功能条 -->
                <ul class="left-items" id="left-items">
                    <li class="left-items-li">
                        <a href="javascript:;">女装</a> /
                        <a href="javascript:;">男装</a> /
                        <a href="javascript:;">内衣</a>
                    </li>
                    <li class="left-items-li">
                        <a href="javascript:;">鞋靴</a> /
                        <a href="javascript:;">箱包</a> /
                        <a href="javascript:;">配件</a>

                    </li>
                    <li class="left-items-li">
                        <a href="javascript:;">童装</a> /
                        <a href="javascript:;">孕产</a> /
                        <a href="javascript:;">玩具</a>

                    </li>
                    <li class="left-items-li">
                        <a href="javascript:;">女装</a> /
                        <a href="javascript:;">男装</a> /
                        <a href="javascript:;">内衣</a>

                    </li>
                    <li class="left-items-li">
                        <a href="javascript:;">女装</a> /
                        <a href="javascript:;">男装</a> /
                        <a href="javascript:;">内衣</a>

                    </li>
                    <li class="left-items-li">
                        <a href="javascript:;">女装</a> /
                        <a href="javascript:;">男装</a> /
                        <a href="javascript:;">内衣</a>

                    </li>
                    <li class="left-items-li">
                        <a href="javascript:;">女装</a> /
                        <a href="javascript:;">男装</a> /
                        <a href="javascript:;">内衣</a>

                    </li>
                    <li class="left-items-li">
                        <a href="javascript:;">女装</a> /
                        <a href="javascript:;">男装</a> /
                        <a href="javascript:;">内衣</a>

                    </li>
                    <li class="left-items-li">
                        <a href="javascript:;">女装</a> /
                        <a href="javascript:;">男装</a> /
                        <a href="javascript:;">内衣</a>

                    </li>
                    <li class="left-items-li">
                        <a href="javascript:;">女装</a> /
                        <a href="javascript:;">男装</a> /
                        <a href="javascript:;">内衣</a>

                    </li>
                    <li class="left-items-li">
                        <a href="javascript:;">女装</a> /
                        <a href="javascript:;">男装</a> /
                        <a href="javascript:;">内衣</a>

                    </li>
                    <li class="left-items-li">
                        <a href="javascript:;">女装</a> /
                        <a href="javascript:;">男装</a> /
                        <a href="javascript:;">内衣</a>

                    </li>
                    <li class="left-items-li">
                        <a href="javascript:;">女装</a> /
                        <a href="javascript:;">男装</a> /
                        <a href="javascript:;">内衣</a>

                    </li>
                    <li class="left-items-li">
                        <a href="javascript:;">女装</a> /
                        <a href="javascript:;">男装</a> /
                        <a href="javascript:;">内衣</a>

                    </li>
                    <div class="left-items-content" id="left-items-content">

                    </div>
                </ul>
                <!-- 图片展示区 -->
                <div class="img-box">
                    <div>
                        <img src="./img/tu1.jpg" alt="">
                        <img src="./img/tu2.jpg" alt="">
                    </div>
                    <div>
                        <img src="./img/tu3.jpg" alt="">
                        <img src="./img/tu4.jpg" alt="">
                    </div>
                </div>
                <!--信息展示区-->
                <div class="tu-right">
                    <div class="right-icon">
                        <img src="./img/hi.png" alt="">
                    </div>
                    <div class="right-btn">
                        <a href="javascript:;">登录</a>
                        <a href="javascript:;">注册</a>
                        <a href="javascript:;">开店</a>
                    </div>
                    <div class="right-warn">网上有害信息举报专区</div>
                    <div class="right-info">
                        <ul class="info-top">
                            <li><a href="javascript:;">公告</a></li>
                            <li><a href="javascript:;">规则</a></li>
                            <li><a href="javascript:;">论坛</a></li>
                            <li><a href="javascript:;">安全</a></li>
                            <li><a href="javascript:;">公益</a></li>
                        </ul>
                        <ul class="info-bottom">
                            <li>公益阿里、腾讯等六家公司同台联合做公益</li>
                            <li>淘宝造物节之城市秘密、聚划算88红包省钱卡</li>
                        </ul>
                    </div>
                    <ul class="right-rechage">
                        <li><a class="icon icon-1" href="javascript:;"></a>
                            <p>充话费</p>
                        </li>
                        <li><a class="icon icon-2" href="javascript:;"></a>
                            <p>旅行</p>
                        </li>
                        <li><a class="icon icon-3" href="javascript:;"></a>
                            <p>车险</p>
                        </li>
                        <li><a class="icon icon-4" href="javascript:;"></a>
                            <p>游戏</p>
                        </li>
                        <li><a href="javascript:;" class="icon icon-1"></a>
                            <p>充话费</p>
                        </li>
                        <li><a href="javascript:;" class="icon icon-2"></a>
                            <p>旅行</p>
                        </li>
                        <li><a href="javascript:;" class="icon icon-3"></a>
                            <p>车险</p>
                        </li>
                        <li><a href="javascript:;" class="icon icon-4"></a>
                            <p>游戏</p>
                        </li>
                        <li><a href="javascript:;" class="icon icon-1"></a>
                            <p>充话费</p>
                        </li>
                        <li><a href="javascript:;" class="icon icon-2"></a>
                            <p>旅行</p>
                        </li>
                        <li><a href="javascript:;" class="icon icon-3"></a>
                            <p>车险</p>
                        </li>
                        <li><a href="javascript:;" class="icon icon-4"></a>
                            <p>游戏</p>
                        </li>
                        <li><a href="javascript:;" class="icon icon-1"></a>
                            <p>充话费</p>
                        </li>
                        <li><a href="javascript:;" class="icon icon-2"></a>
                            <p>旅行</p>
                        </li>
                        <li><a href="javascript:;" class="icon icon-3"></a>
                            <p>车险</p>
                        </li>
                        <li><a href="javascript:;" class="icon icon-4"></a>
                            <p>游戏</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="body-2">
            <div class="item">
                <div class="title">
                    <img src="./img/body-2-logo-1.jpg" alt="">
                    <span>与品质生活不期而遇</span>
                </div>
                <div class="content">
                    <div class="content-item">
                        <img src="./img/body-2-baby-1.png" alt="">
                        <p class="desc1">小狗图案不锈钢皂</p>
                        <p class="desc2">小狗图案不锈钢皂</p>
                        <p class="desc3">13673人说好</p>
                    </div>
                    <div class="content-item">
                        <img src="./img/body-2-baby-2.png" alt="">
                        <p class="desc1">小狗图案不锈钢皂</p>
                        <p class="desc2">小狗图案不锈钢皂</p>
                        <p class="desc3">13673人说好</p>
                    </div>
                    <div class="content-item">
                        <img src="./img/body-2-baby-3.png" alt="">
                        <p class="desc1">小狗图案不锈钢皂</p>
                        <p class="desc2">小狗图案不锈钢皂</p>
                        <p class="desc3">13673人说好</p>
                    </div>
                </div>
                <div class="content">
                    <div class="content-item">
                        <img src="./img/body-2-baby-1.png" alt="">
                        <p class="desc1">小狗图案不锈钢皂</p>
                        <p class="desc2">小狗图案不锈钢皂</p>
                        <p class="desc3">13673人说好</p>
                    </div>
                    <div class="content-item">
                        <img src="./img/body-2-baby-2.png" alt="">
                        <p class="desc1">小狗图案不锈钢皂</p>
                        <p class="desc2">小狗图案不锈钢皂</p>
                        <p class="desc3">13673人说好</p>
                    </div>
                    <div class="content-item">
                        <img src="./img/body-2-baby-3.png" alt="">
                        <p class="desc1">小狗图案不锈钢皂</p>
                        <p class="desc2">小狗图案不锈钢皂</p>
                        <p class="desc3">13673人说好</p>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="title">
                    <img src="./img/body-2-logo-1.jpg" alt="">
                    <span>与品质生活不期而遇</span>
                </div>
                <div class="content">
                    <div class="content-item">
                        <img src="./img/body-2-baby-1.png" alt="">
                        <p class="desc1">小狗图案不锈钢皂</p>
                        <p class="desc2">小狗图案不锈钢皂</p>
                        <p class="desc3">13673人说好</p>
                    </div>
                    <div class="content-item">
                        <img src="./img/body-2-baby-2.png" alt="">
                        <p class="desc1">小狗图案不锈钢皂</p>
                        <p class="desc2">小狗图案不锈钢皂</p>
                        <p class="desc3">13673人说好</p>
                    </div>
                    <div class="content-item">
                        <img src="./img/body-2-baby-3.png" alt="">
                        <p class="desc1">小狗图案不锈钢皂</p>
                        <p class="desc2">小狗图案不锈钢皂</p>
                        <p class="desc3">13673人说好</p>
                    </div>
                </div>
                <div class="content">
                    <div class="content-item">
                        <img src="./img/body-2-baby-1.png" alt="">
                        <p class="desc1">小狗图案不锈钢皂</p>
                        <p class="desc2">小狗图案不锈钢皂</p>
                        <p class="desc3">13673人说好</p>
                    </div>
                    <div class="content-item">
                        <img src="./img/body-2-baby-2.png" alt="">
                        <p class="desc1">小狗图案不锈钢皂</p>
                        <p class="desc2">小狗图案不锈钢皂</p>
                        <p class="desc3">13673人说好</p>
                    </div>
                    <div class="content-item">
                        <img src="./img/body-2-baby-3.png" alt="">
                        <p class="desc1">小狗图案不锈钢皂</p>
                        <p class="desc2">小狗图案不锈钢皂</p>
                        <p class="desc3">13673人说好</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="body-3">
            <h1 class="title-h1">
                <div class="icon"></div>热卖单品
            </h1>
            <div class="content">
                <div class="item">
                    <img src="./img/body-3-1.png" alt="">
                    <p class="desc-1">纯棉男女军绿色t恤2018新款宽松韩版初秋长</p>
                    <p class="desc-2">评价：17705 收藏：6875</p>
                    <p></p>
                </div>
                <div class="item">
                    <img src="./img/body-3-1.png" alt="">
                    <p class="desc-1">纯棉男女军绿色t恤2018新款宽松韩版初秋长</p>
                    <p class="desc-2">评价：17705 收藏：6875</p>
                    <p></p>
                </div>
                <div class="item">
                    <img src="./img/body-3-1.png" alt="">
                    <p class="desc-1">纯棉男女军绿色t恤2018新款宽松韩版初秋长</p>
                    <p class="desc-2">评价：17705 收藏：6875</p>
                    <p></p>
                </div>
                <div class="item">
                    <img src="./img/body-3-1.png" alt="">
                    <p class="desc-1">纯棉男女军绿色t恤2018新款宽松韩版初秋长</p>
                    <p class="desc-2">评价：17705 收藏：6875</p>
                    <p></p>
                </div>
                <div class="item">
                    <img src="./img/body-3-1.png" alt="">
                    <p class="desc-1">纯棉男女军绿色t恤2018新款宽松韩版初秋长</p>
                    <p class="desc-2">评价：17705 收藏：6875</p>
                    <p></p>
                </div>
                <div class="item">
                    <img src="./img/body-3-1.png" alt="">
                    <p class="desc-1">纯棉男女军绿色t恤2018新款宽松韩版初秋长</p>
                    <p class="desc-2">评价：17705 收藏：6875</p>
                    <p></p>
                </div>
                <div class="item">
                    <img src="./img/body-3-1.png" alt="">
                    <p class="desc-1">纯棉男女军绿色t恤2018新款宽松韩版初秋长</p>
                    <p class="desc-2">评价：17705 收藏：6875</p>
                    <p></p>
                </div>
                <div class="item">
                    <img src="./img/body-3-1.png" alt="">
                    <p class="desc-1">纯棉男女军绿色t恤2018新款宽松韩版初秋长</p>
                    <p class="desc-1">评价：17705 收藏：6875</p>
                    <p></p>
                </div>
                <div class="item">
                    <img src="./img/body-3-1.png" alt="">
                    <p class="desc-1">纯棉男女军绿色t恤2018新款宽松韩版初秋长</p>
                    <p class="desc-2">评价：17705 收藏：6875</p>
                    <p></p>
                </div>
                <div class="item">
                    <img src="./img/body-3-1.png" alt="">
                    <p class="desc-1">纯棉男女军绿色t恤2018新款宽松韩版初秋长</p>
                    <p class="desc-2">评价：17705 收藏：6875</p>
                    <p></p>
                </div>
            </div>
        </div>

        <div class="footer">
            <div class="item">
                <h2 class="title">消费者保证</h2>
                <div>
                    <span>保障范围</span>
                    <span>退货退款流程</span>
                    <span>服务中心</span>
                    <span>更多特色服务</span>
                </div>
            </div>
            <div class="item">
                <h2 class="title">消费者保证</h2>
                <div>
                    <span>保障范围</span>
                    <span>退货退款流程</span>
                    <span>服务中心</span>
                    <span>更多特色服务</span>
                </div>
            </div>
            <div class="item">
                <h2 class="title">消费者保证</h2>
                <div>
                    <span>保障范围</span>
                    <span>退货退款流程</span>
                    <span>服务中心</span>
                    <span>更多特色服务</span>
                </div>
            </div>
            <div class="item">
                <h2 class="title">消费者保证</h2>
                <div>
                    <span>保障范围</span>
                    <span>退货退款流程</span>
                    <span>服务中心</span>
                    <span>更多特色服务</span>
                </div>
            </div>
        </div>
    </div>


    <script src="./js/index.js"></script>
</body>

</html>